<!DOCTYPE html>
<!-- 
 * Markup for Dojo Reveal Plugin 1.0
 * www.ZURB.com/playground
 * Copyright 2010, ZURB
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 -->
	<head>
		<meta charset="utf-8" />
		<title>Reveal Demo</title>
		
		<!-- Attach our CSS -->
	  	<link rel="stylesheet" href="reveal.css">	
	  	
		<!-- Attach necessary scripts -->
		<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>
		<script type="text/javascript" src="dojo.reveal.js"></script>
		<script>
			function openModal() {
				reveal = new ZURB.Reveal({modalId: "myModal"});
				reveal.openModal();
			}
		</script>
		
		<style type="text/css">
			body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
			.big-link { display:block; margin-top: 100px; text-align: center; font-size: 70px;}
		</style>
		
	</head>
	<body>

		<a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="fadeAndPop">
			Fade and Pop Animation
		</a>
		
		<a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="fade">
			Fade Animation
		</a>
		
		<a href="#" class="big-link" dojoType="ZURB.Reveal" modalId="myModal" animation="none">
			No Animation
		</a>
		
		<a href="#" class="big-link" onclick="openModal(); return false;">
			Open With Script
		</a>

		<div id="myModal" class="reveal-modal">
			<h1>Reveal Modal Goodness</h1>
			<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
			
	</body>
</html>